<template>
    <div>
        <div class="leftBlock">
            <el-row style="padding: 20px">
                <div class="font" style="font-family: 黑体">打卡数据</div>
            </el-row>
            <el-row style="padding-top: 10px">
                <el-table
                        :data="registTableData"
                        style="width: 100%; border-radius: 10px;"
                        height="540"
                        stripe>
                    <el-table-column
                        label="id"
                        prop="id"
                        v-if="false">
                    </el-table-column>
                    <el-table-column
                            label="姓名"
                            align="center"
                            prop="userName">
                    </el-table-column>
                    <el-table-column
                            label="任职"
                            align="center"
                            prop="serve">
                    </el-table-column>
                    <el-table-column
                            label="任职时间"
                            align="center"
                            prop="enterDate">
                    </el-table-column>
                    <el-table-column
                            label="工作"
                            align="center"
                            prop="job">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="220"
                            align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                round
                                @click="handleDaka(scope.row)">打卡查询</el-button>
                            <el-button
                                size="mini"
                                type="primary"
                                round
                                @click="handleSchedule(scope.row)">更改排班</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <div class="rightBlock">
            <el-row style="padding: 20px">
                <div class="font" style="font-family: 黑体">员工请假审批</div>
            </el-row>
            <el-row style="padding-top: 10px">
                <span class="demonstration mr20 ml10">日期选择</span>
                <el-date-picker
                        v-model="timeValue"
                        align="right"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerOptions">
                </el-date-picker>
            </el-row>
            <el-row style="padding-top: 10px">
                <el-table
                        :data="attendtTableData"
                        style="width: 100%; border-radius: 10px;"
                        height="500"
                        stripe>
                    <el-table-column
                            prop = "id"
                            label="工号"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="leaveTime"
                            label="日期"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            sortable
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="reason"
                            v-if="false">
                    </el-table-column>
                    <el-table-column
                            label="请假原因"
                            align="center">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                round
                                type="primary"
                                @click="handleReason(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
        </div>
        <el-dialog title="打卡查询"
                   :visible.sync="dakaVisible"
                   height="150px"
                   width="40%">
            <div class="dialogDiv">
                <el-row>
                    <span class="demonstration mr20 ml10">日期选择</span>
                    <el-date-picker
                            v-model="registTimeValue"
                            align="right"
                            type="date"
                            placeholder="选择日期"
                            :picker-options="registPickerOptions">
                    </el-date-picker>
                </el-row>
                <el-row style="padding-top: 20px">
                    <el-table
                            :data="registTableData1"
                            height="340"
                            style="width: 100%; border-radius: 5px">
                        <el-table-column
                                prop="userName"
                                align="center"
                                label="姓名">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                align="center"
                                label="时间">
                        </el-table-column>
                        <el-table-column
                                prop="isAttend"
                                align="center"
                                label="出勤">
                        </el-table-column>
                    </el-table>
                </el-row>
            </div>
        </el-dialog>

        <el-dialog title="更改排班"
                   :visible.sync="scheduleVisible"
                   width="35%">
            <div class="dialogDiv_schedule">
                <el-form ref="scheduleForm" :data="scheduleForm" label-width="100px">
                    <el-form-item label="工号">
                        <el-input v-model="scheduleForm.id"
                                  :disabled="true"
                                  style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input  v-model="scheduleForm.userName"
                                   :disabled="true"
                                   style="width: 250px"></el-input>
                    </el-form-item>
                    <el-form-item label="职位">
                        <el-select v-model="scheduleForm.serve" filterable placeholder="请选择职位" style="width: 250px">
                            <el-option
                                v-for="item in serveOptions"
                                :key="item.mKey"
                                :label="item.postType"
                                :value="item.postType">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务分配">
                        <el-input type="textarea" :rows="3" v-model="scheduleForm.job" style="width: 350px"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="editSchedule" >确定</el-button>
                <el-button type="info" @click="scheduleVisible = false" >取消</el-button>
            </div>
        </el-dialog>

        <el-dialog title="请假原因"
                   :visible.sync="reasonVisible"
                   width="40%">
            <div class="dialogDiv_leave">
                <div class="div_leave">
                    <el-form ref="leaveForm" :data="leaveForm" label-width="100px">
                        <el-input type="textarea" :rows="5" v-model="leaveForm.reason" disabled="ture"></el-input>
                    </el-form>
                </div>

                <div slot="footer" class="dialog-footer" style="float: right">
                    <el-button type="primary" @click="reasonVisible = false" >同意</el-button>
                    <el-button type="info" @click="disAgree" >不同意</el-button>
                </div>
            </div>
        </el-dialog>
    </div>

</template>

<script>
    import {
        requestGetUserInfo,requestGetRegistInfo,requestGetServeOptions,requestEditUserInfo,
        requestLeavePermission,requestGetLeaveByDate,requestDisagree,requestGetRegistInfoByTime
    } from '../../../api';
    import eventBus from '../../../utils/eventBus';
    export default {
        name: 'dakaRecord',
        data(){
            return{
                leaveTimeValue:'',
                dakaUserName:'',
                dakaId:'',
                registTimeValue:'',
                timeValue:'',
                serveOptions: [],
                registTableData: [],
                registTableData1: [],
                search: '',
                attendtTableData: [],
                scheduleTableData: [],
                reasonVisible: false,
                dakaVisible: false,
                scheduleVisible: false,
                input:'王二小',
                scheduleForm: {
                    id:'',
                    userName:'',
                    enterDate:'',
                    serve: '',
                    job:''
                },
                leaveForm:{
                    reason:'',
                    id:'',
                    leaveTime:''
                },
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                registPickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },

            }
        },
        created() {
            this.getAllRegistInfo();
            this.getLeaveInfo();
        },
        mounted(){
            let this_ = this;
            eventBus.on("refreshLeave",this_.getLeaveInfo);
        },
        watch:{
            async timeValue(){
                let time = '';
                if (this.timeValue === null){
                    let json1 = { params: '' };
                    const res1 = await requestLeavePermission(json1);
                    console.log(res1);
                    this.attendtTableData = res1.map((item)=>{
                            let leaveTime = item.leaveTime;
                            this.leaveTimeValue = item.leaveTime;
                            leaveTime = this.getDateTime(leaveTime);
                            item["leaveTime"] = leaveTime;
                            return item;
                    });
                }else{
                    time = this.changeDateToFomat(this.timeValue);
                    let json = {
                        date : time
                    };
                    console.log(json);
                    const res = await requestGetLeaveByDate(json).catch(() => {
                        _this.loading = false;
                        this.$message.warning("该天没有人请假")
                    });
                    this.attendtTableData = res.map((item)=>{
                        let leaveTime = item.leaveTime;
                        this.leaveTimeValue = item.leaveTime;
                        leaveTime = this.getDateTime(leaveTime);
                        item["leaveTime"] = leaveTime;
                        return item;
                    });
                }
            },
            async registTimeValue(){
                let time = '';
                let startTime = '';
                let endTime = '';
                if (this.registTimeValue === null){
                    let json = {
                        id: this.dakaId,
                        userName: this.dakaUserName
                    };
                    console.log(json);
                    const res = await requestGetRegistInfo(json);
                    if("error"!==res){
                        this.registTableData1 = res.map((item)=>{
                            if (item.isAttend === "上班"){
                                let registTime = item.registTime;
                                registTime = this.getLocalTime(registTime);
                                item["time"] = registTime;
                                return item;
                            }else{
                                let registTime = item.registTime;
                                registTime = this.getDateTime(registTime);
                                item["time"] = registTime;
                                return item;
                            }
                        });
                    }
                }else{
                    time = this.changeDateToFomat(this.registTimeValue);
                    let st = time+" 00:00:00";
                    let et = time+" 23:59:59";
                    startTime = Date.parse(st)/1000;
                    endTime = Date.parse(et)/1000;
                    let json = {
                        id: this.dakaId,
                        startTime: startTime,
                        endTime: endTime,
                        leaveTime: time
                    };
                    console.log(json);
                    const res = await requestGetRegistInfoByTime(json);
                    if("error"!==res){
                        this.registTableData1 = res.map((item)=>{
                            if (item.isAttend === "上班"){
                                let registTime = item.registTime;
                                registTime = this.getLocalTime(registTime);
                                item["time"] = registTime;
                                return item;
                            }else{
                                let registTime = item.registTime;
                                registTime = this.getDateTime(registTime);
                                item["time"] = registTime;
                                return item;
                            }
                        });
                    }
                }
            }
        },
        methods:{

            async getAllRegistInfo() {
                let json = { params: '' };
                const res = await requestGetUserInfo(json);
                this.registTableData = res;
                const res1 = await requestGetServeOptions(json);
                this.serveOptions = this.serveOptions.concat(res1);
            },
            async getLeaveInfo(){
                let json = { params: '' };
                /*开始获取所有请假审批*/
                const res2 = await requestLeavePermission(json);
                console.log(res2);
                this.attendtTableData = res2.map((item)=>{
                    let leaveTime = item.leaveTime;
                    this.leaveTimeValue = item.leaveTime;
                    leaveTime = this.getDateTime(leaveTime);
                    item["leaveTime"] = leaveTime;
                    return item;
                });
            },
            async handleDaka(row) {
                let json = {
                    id: row.id,
                    userName: row.userName };
                console.log(json);
                this.dakaId = row.id;
                this.dakaUserName = row.userName;
                const res = await requestGetRegistInfo(json);
                if("error"!==res){
                    this.registTableData1 = res.map((item)=>{
                        if (item.isAttend === "上班"){
                            let registTime = item.registTime;
                            registTime = this.getLocalTime(registTime);
                            item["time"] = registTime;
                            return item;
                        }else{
                            let registTime = item.registTime;
                            registTime = this.getDateTime(registTime);
                            item["time"] = registTime;
                            return item;
                        }
                    });
                }
                this.dakaVisible = true;
            },
            async handleSchedule(item) {
                this.scheduleForm = JSON.parse(JSON.stringify(item));

                this.scheduleVisible = true;
            },
            async handleReason(item) {
                this.leaveForm = JSON.parse(JSON.stringify(item));
                this.reasonVisible = true;
            },
            async editSchedule(){
                let json = {
                    id : this.scheduleForm.id,
                    serve : this.scheduleForm.serve,
                    job: this.scheduleForm.job
                };
                console.log(json);
                //转变职责后更新表格信息（任职和时间）
                const res = await requestEditUserInfo(json).catch(() => {
                    _this.loading = false;
                    this.$message.warning("修改职责未成功")
                });
                this.registTableData = res;
                this.getAllRegistInfo();
                this.scheduleVisible = false;
            },
            async disAgree(){
                let json = {
                    id : this.leaveForm.id,
                    date : this.leaveTimeValue
                };
                console.log("disagree:"+json);
                const res = await requestDisagree(json).catch(() => {
                    _this.loading = false;
                    this.$message.warning("不同意处理未成功")
                });
                this.attendtTableData = res.map((item)=>{
                    let leaveTime = item.leaveTime;
                    this.leaveTimeValue = item.leaveTime;
                    leaveTime = this.getDateTime(leaveTime);
                    item["leaveTime"] = leaveTime;
                    return item;
                });
                this.reasonVisible = false;
            },
            //转化日期标准格式：“xx-xx-xx”
            changeDateToFomat(date) {
                let seperator1 = "-";
                let month = date.getMonth() + 1;
                let strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
                return currentdate;
            },
            /*将时间戳转换为标准格式*/
            getLocalTime(nS) {
                var d = new Date(parseInt(nS)*1000);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    ((d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1)) +
                    '-' +
                    ((d.getDate()) < 10 ? '0' + d.getDate() : d.getDate()) +
                    ' ' +
                    ((d.getHours()) < 10 ? '0' + d.getHours() : d.getHours()) +
                    ':' +
                    ((d.getMinutes()) < 10 ? '0' + d.getMinutes() : d.getMinutes()) +
                    ':' +
                    ((d.getSeconds()) < 10 ? '0' + d.getSeconds() : d.getSeconds());
                return date;
            },
            /*将时间戳转换为标准格式，到日*/
            getDateTime(nS) {
                var d = new Date(parseInt(nS)*1000);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    ((d.getMonth() + 1) >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1)) +
                    '-' +
                    ((d.getDate()) < 10 ? '0' + d.getDate() : d.getDate());
                return date;
            },
        },
        beforeDestroy() {
            eventBus.removeListener("refreshLeave",this.getLeaveInfo);
        }
    };
</script>

<style scoped>
    .input_float .el-form-item__content{
        float: left;

    }
    .dialogDiv_leave{
        height: 200px;
        overflow: auto;
    }
    .div_leave{
        height: 150px;
        overflow: auto;
    }
    .dialogDiv_schedule{
        height: 240px;
        overflow: auto;
    }
    .dialogDiv{
        height: 400px;
        overflow: auto;
    }
    .font{
        font-size: 26px;
        line-height: 1.7px;
    }
    .leftBlock{
        padding: 10px;
        height: 610px;
        width: 47%;
        overflow: auto;
        float: left;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
    }
    .rightBlock{
        padding: 10px;
        height: 610px;
        width: 48%;
        overflow: auto;
        float: right;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
        box-shadow: 0 2px 8px 0 rgba(0,0,0,0.1);
    }
    .mr20{
        margin-right: 20px;
    }
    .ml10{
        margin-left: 10px;
    }
</style>